import React, { Component } from 'react';

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'

class ReactRouterPage extends Component {
    render() {
        return (
            <div>
                <h3>ReactRouterPage</h3>
                <Router>
                    <Link to='/'>首页</Link>
                    <Link to='/user'>用户中心</Link>
                    {/* children -> component -> render，三者互斥，并且children不会和local没有关系 */}
                    <Switch>
                        <Route 
                            exact 
                            path='/' 
                            component = { HomePage} 
                            // children = {()=><div>children</div>}
                            // render = {()=><div>render</div>}
                        />
                        <Route exact path='/user' component = { UserPage} />
                        <Route component = { EptyPage} />
                    </Switch>
                </Router>
            </div>
        );
    }
}

class HomePage extends Component{
    render(){
        return <div>
            <h3>HomePage</h3>
        </div>
    }
}
class UserPage extends Component{
    render(){
        return <div>
            <h3>UserPage</h3>
        </div>
    }
}
class EptyPage extends Component{
    render(){
        return <div>
            <h3>EptyPage-404</h3>
        </div>
    }
}

export default ReactRouterPage;